import React from 'react'
import '../assets/css/Login.css'

import { List, InputItem, Toast, Button, Checkbox, Flex } from 'antd-mobile'

const AgreeItem = Checkbox.AgreeItem

class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false,
      value: '',
      checkState: false,
      inputState: 1, // 1登录  2 注册
    }
  }
  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.info('Please enter 11 digits')
    }
  }
  onChange = value => {
    if (value.replace(/\s/g, '').length < 11) {
      this.setState({
        hasError: true,
      })
    } else {
      this.setState({
        hasError: false,
      })
    }
    this.setState({
      value,
    })
  }
  render() {
    let inputState = this.state.inputState
    let htmlTemp = null
    let titleStr = null
    let forgetHtml = null
    let buttonHtml = null
    if (inputState === 1) {
      htmlTemp = (
        <p>
          <span>没有账号?</span>
          <span
            className="tologin"
            onClick={() => {
              this.toRegister(2)
            }}
          >
            去注册
          </span>
        </p>
      )
      titleStr = '登录账户'
      forgetHtml = (
        <span
          className="forgetPas"
          onClick={() => {
            this.forgetPass(true)
          }}
        >
          忘记密码
        </span>
      )
      buttonHtml = (
        <Button onClick={this.toLogin} type="primary">
          登录
        </Button>
      )
    } else if (inputState === 2) {
      titleStr = '注册账号'
      htmlTemp = (
        <p>
          <span>已有账号</span>
          <span
            className="tologin"
            onClick={() => {
              this.toRegister(1)
            }}
          >
            去登录
          </span>
        </p>
      )
      forgetHtml = null
      buttonHtml = <Button type="primary">注册</Button>
    } else {
      htmlTemp = (
        <p>
          <span>已有账号</span>
          <span
            className="tologin"
            onClick={() => {
              this.toRegister(1)
            }}
          >
            去登录
          </span>
        </p>
      )
      forgetHtml = (
        <span
          className="forgetPas"
          onClick={() => {
            this.forgetPass(false)
          }}
        >
          返回登录
        </span>
      )
      titleStr = '重置密码'
      buttonHtml = <Button type="primary">立即重置</Button>
    }
    return (
      <div className="Login_container">
        <div className="Img_cont">
          <img
            src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/yingke/resource/image/default/202004/82614d891e2db8db02bf18cd0223e207.jpg"
            alt="login_img"
            width="100%"
            height="100%"
          />
        </div>
        <div className="Form_cont">
          <h3>{titleStr}</h3>
          <p>请输入手机号或用户名及密码</p>
          {htmlTemp}
          <div className="from_input">
            <List>
              <InputItem
                type="phone"
                placeholder="input your phone"
                error={this.state.hasError}
                onErrorClick={this.onErrorClick}
                onChange={this.onChange}
                value={this.state.value}
                className="input_text"
              >
                china(+86)
              </InputItem>
              {this.state.inputState === 2 ? (
                <InputItem placeholder="验证码 " />
              ) : (
                ''
              )}
              <InputItem placeholder="Password length 8-20 " />
            </List>
          </div>
          <p className="forgetPas_con">{forgetHtml}</p>
          {buttonHtml}
          <Flex>
            <Flex.Item>
              <AgreeItem
                data-seed="logId"
                // onChange={e => console.log('checkbox', e)}
                onChange={this.changeState}
              >
                我已经阅读并同意
                <a
                  onClick={e => {
                    e.preventDefault()
                    alert('agree it')
                  }}
                >
                  《用户协议》
                </a>
                <a
                  onClick={e => {
                    e.preventDefault()
                    alert('agree it')
                  }}
                >
                  《隐私协议》
                </a>
              </AgreeItem>
            </Flex.Item>
          </Flex>
        </div>
      </div>
    )
  }
  changeState = () => {
    let checkState = this.state.checkState
    this.setState({
      checkState: !checkState,
    })
  }
  toRegister = type => {
    this.setState({
      inputState: type,
    })
  }
  forgetPass = bull => {
    let inputState = bull ? 3 : 1
    // console.log(inputState)
    this.setState({
      inputState: inputState,
    })
  }
  toLogin = () => {
    // alert('denglui')
    let checkState = this.state.checkState
    if (checkState === false) {
      Toast.fail('请先勾选用户许可协议', 1)
    }
  }
}

export default Login
